<template>
  <div>
    <div ref="chartRef" class="w-full h-48"></div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, Ref, watch, h } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import {
    echartsPublicOptions,
    emptyOptions,
  } from '/@/views/thingsborad/api/components/echartsSetting';

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
  setOptions({
    ...echartsPublicOptions(null),
    legend: {
      type: 'scroll',
      left: 10,
      data: ['创建告警数'],
    },

    series: [
      {
        name: '创建告警数',
        data: [
          [1712453827641, 100],
          [1712453867641, 20],
        ],
        type: 'bar',
        stack: 'x',
        itemStyle: {
          color: '#FF6337',
        },
      },
    ],
  });
</script>
